<!--
 * @Author: cqg 
 * @Date: 2020-11-24 18:29:01
 * @LastEditors: cqg
 * @LastEditTime: 2020-12-29 11:27:32
 * @Description: file content
-->
<template>
  <contractLayout>
    <template slot="left">
      <contractList
        :pageInfo="contract.pager"
        placeholder="请输入物业名称"
        searchName="propertyNames"
        selectShow
        :selectOp="selectOp"
        v-loading="contract.loading"
        element-loading-text="数据加载中..."
      >
        <ul class="contractList">
          <li
            v-for="item in contract.tableData"
            :key="item.lessorContractId"
            :class="{ active: item.active }"
            @click="changeAccountList(item.lessorContractId)"
          >
            <div class="top">
              <div class="title">{{ item.propertyNames }}</div>
              <span class="btn accounting" v-if="item.status == '10'" @click.stop="$refs.editReceive.show(item)">接收</span>
              <span class="btn accounting" v-if="item.status == '11'" @click.stop="$refs.editCheck.show(item)">核算</span>
              <span class="btn viewContract" @click.stop="$refs.contractView.show(item.lessorContractId) ">查看合同</span>
            </div>
            <el-row>
              <span class="status" :class="item.status == '10' ? 'white' : 'blue'">{{item.status == '10'?'未接收':'已接收'}}</span>
              <span class="status" :class="['10','11'].includes(item.status) ? 'white':'blue'">{{['10','11'].includes(item.status) ? '未核算' : '已核算'}}</span>
            </el-row>
            <el-row>
              <el-col :span="8">建筑面积</el-col>
              <el-col :span="16">{{ item.buildingArea }}㎡</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">租赁周期:</el-col>
              <el-col :span="16">{{ item.startDate }}至{{item.endDate}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">物业名称:</el-col>
              <el-col :span="16" :title="item.propertyNames">{{item.propertyNames}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">物业地址:</el-col>
              <el-col :span="16" :title="item.address">{{ item.address }}</el-col>
            </el-row>
          </li>
        </ul>
      </contractList>
    </template>
    <div class="accountWarp" v-loading="account.loading" element-loading-text="数据加载中...">
      <dataList
        :pageInfo="account.pager"
        placeholder="搜索物业名称"
        :filterList="account.filterList"
        :listData="account.tableData"
        searchName="propertyNames"
        :menuList="[]"
        :listLayout="['menu','filter']"
      >
        <el-table ref="multipleTable" :data="account.tableData">
          <el-table-column label="付款项目" width="100" align="center" prop="chargeProjectName" />
          <el-table-column label="费用周期" align="center" prop="costPeriodStart" width="200">
            <template slot-scope="scope">
              {{ scope.row.costPeriodStart }}至{{
              scope.row.costPeriodEnd
              }}
            </template>
          </el-table-column>
          <el-table-column label="应付日期" align="center" prop="payableDate" width="100" />
          <el-table-column label="出租方" align="center" prop="customerName" width="200" />
          <el-table-column label="应付金额" align="center" prop="payableMoney" width="100" />
        </el-table>
      </dataList>
    </div>
    <edit-data ref="editData" @resetList="getTabListData" />
    <edit-receivable @resetList="getTabListData" ref="editReceivable" />
    <edit-actual ref="editActual" @resetList="getTabListData" />

    <edit-check ref="editCheck" @resetList="getTabListData" @getTabListData="getTabListData" />
    <edit-receive ref="editReceive" @resetList="getTabListData" @getTabListData="getTabListData" />
    <lead-data ref="leadData" @resetList="getTabListData" />
    <showActual ref="showActual" @resetList="getTabListData" />
    <editAccounts ref="editAccounts" @resetList="getTabListData" />
    <contract-view ref="contractView" />
  </contractLayout>
</template>
<script src="./index.js"/>
<style lang="scss">
@import "./index";
</style>